<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../echarts.js/demo/animate.css">
    <script src="../lib/two.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        //创建two对象，指定画布宽高，指定画布为canvas还是svg
        var two=new Two({
            width:800,
            height:400,
            type:Two.Types.svg
        }).appendTo(box);
        //2.绘制矩形圆形
        var c=two.makeCircle(-100,0,50);
        var r=two.makeRectangle(100,0,100,100);
        //让矩形旋转90度
        //two.js所有旋转都是以自己为中心且旋转不会累加
        //r.rotation=60*Math.PI/180

        //two.js中的小组（group）本身透明不可见，可以用于盛放多个图形，默认原点（0,0），小组中元素相对于小组原点
        var g=two.makeGroup(r,c);
        g.translation.set(200,100);//平移小组原点
        g.rotation=40*Math.PI/180;

        //动画原理：钓鱼two.play()该方法会每秒钟调用60次two.update()方法，每次调用一次update事件
        two.play();
        var deg=0;//旋转角度
        two.on("update",function () {
            deg+=0.5;
            g.rotation=deg*Math.PI/180;
        })
        two.update();
    </script>
</body>
</html>